<!--
* description: VIN码选择
* author: duanhy
* createdDate: 2020-12-10
-->
<template>
  <el-dialog
    class="dialog"
    :visible="popupsVisible"
    :title="titleName"
    width="70%"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="VINClose"
  >
    <dialogHeader slot="title" :title="titleName" :style-type="$store.state.app.dialogType" />
    <div>
      <one-table-template
        ref="multipleTable"
        :dynamic-table-defult-height="330"
        :dynamic-api-config="apiConfig"
        :dynamic-buttons="dynamicButtons"
        :dynamic-components="tableComponents"
        :dynamic-table-cols="dynamicTableCols"
        :dynamic-form-fields="formField"
        :dynamic-is-show-select="false"
        :dynamic-page-size="10"
        :dynamic-export-converts="dynamicExportConverts"
        :refresh-table-key="refreshTableKey"
        :callback-obj="callbackObj"
      />
    </div>
  </el-dialog>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import dialogHeader from '@/components/dialogHeader'
import OneTableTemplate from '@/components/templates/oneTable'
import apiTransfer from '@/api/apiVeTransferManagement'
import api from '@/api/apiVeData'
export default {
  components: {
    dialogHeader,
    OneTableTemplate
  },
  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins],
  props: {
    vinSelectApi: {
      type: Object,
      default: () => {}
    },
    popupsVisible: {
      type: Boolean,
      default: false
    },
    dataForForm: {
      type: Object,
      default: () => {}
    },
    titleName: {
      type: String,
      default: ''
    }
  },

  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      selectList: [],
      refreshTableKey: '0',
      editPopupsState: 'add',
      // table表格查询API配置对象
      apiConfig: this.dataForForm.storeOrZb === 'zb' ? apiTransfer.listStockCar : apiTransfer.listStockCarStore,
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
            .tableComponents
          : [
            {
              compKey: 'compKey2',
              labelName: 'VIN码：',
              codeField: 'vin',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey1',
              labelName: '仓库：',
              codeField: 'stockName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey9',
              labelName: '车系：',
              codeField: 'carSeriesId',
              textField: 'carSeriesCn',
              component: () => import('@/components/org/commonSelect'),
              type: 'dropdownList',
              isMul: false,
              isMust: true,
              span: 8,
              oFields: 'carSeriesId,carSeriesCn',
              customObj: {
                api: api.listOfCarSeries
              }
            },
            {
              compKey: 'compKey10',
              labelName: '基础车型：',
              codeField: 'carConfigId',
              textField: 'carConfigCn',
              component: () => import('@/components/org/commonSelect'),
              type: 'dropdownList',
              isMul: false,
              isMust: true,
              span: 8,
              oFields: 'carConfigId,carConfigCn',
              parentFileds: 'value:carSeriesId',
              customObj: {
                api: api.queryCarType,
                listQuery: {
                  carSeriesId: ''
                }
              }
            },
            {
              compKey: 'compKey11',
              labelName: '选装包：',
              codeField: 'optionalPagId',
              textField: 'optionalPagName',
              component: () => import('@/components/org/commonSelect'),
              type: 'dropdownList',
              isMul: false,
              isMust: true,
              span: 8,
              oFields: 'optionalPagId,optionalPagName',
              parentFileds: 'value:carConfigId',
              customObj: {
                api: api.queryCarOptionalPagLinkMessage,
                listQuery: {
                  carConfigId: ''
                }
              }
            },
            {
              compKey: 'compKey12',
              labelName: '车身颜色：',
              codeField: 'carColorId',
              textField: 'carColorName',
              component: () => import('@/components/org/commonSelect'),
              oFields: 'carColorId,carColorName',
              type: 'dropdownList',
              isMul: false,
              isMust: true,
              span: 8,
              parentFileds: 'value:carConfigId|carSeriesId|optionalPagId',
              customObj: {
                listQuery: {
                  carConfigId: '', carSeriesId: '', optionalPagId: ''
                },
                api: api.queryCarColorLinkMessage
              }
            },
            {
              compKey: 'compKey13',
              labelName: '内饰颜色：',
              codeField: 'carIncolorId',
              textField: 'carIncolorName',
              component: () => import('@/components/org/commonSelect'),
              oFields: 'carIncolorId,carIncolorName',
              type: 'dropdownList',
              isMul: false,
              isMust: true,
              span: 8,
              parentFileds: 'value:carConfigId|carSeriesId|optionalPagId',
              customObj: {
                listQuery: {
                  carConfigId: '', carSeriesId: '', optionalPagId: ''
                },
                api: api.queryCarInColorLinkMessage
              }
            }
          ],
      // form 的表单对象
      formField: {
        stockId: '',
        vin: '',
        carSeriesId: '',
        carConfigId: '',
        optionalPagId: '',
        carColorId: '',
        carIncolorId: ''
      },

      // 动态组件-按钮
      dynamicButtons:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
          : [
            {
              compKey: 'btnKey1',
              type: 'primary',
              size: 'small',
              clickEvent: () => this.queryTable(1),
              text: '查询',
              icon: 'iconfont  icon-preservation',
              position: 'right',
              fuzzySearch: true
            },
            {
              compKey: 'btnKey2',
              type: '',
              size: 'small',
              icon: 'iconfont  icon-cancel',
              name: 'reset',
              position: 'right',
              clickEvent: () => this.reset(),
              text: '重置'
            }
            // {
            //   compKey: 'btnKey1',
            //   type: 'primary',
            //   size: 'small',
            //   clickEvent: () => this.preservation(),
            //   text: '确认',
            //   icon: 'iconfont  icon-preservation',
            //   position: 'left',
            //   fuzzySearch: true
            // },
            // {
            //   compKey: 'btnKey2',
            //   type: '',
            //   size: 'small',
            //   icon: 'iconfont  icon-cancel',
            //   name: 'reset',
            //   position: 'left',
            //   clickEvent: () => this.VINClose(),
            //   text: '取消'
            // }
          ],
      // 动态组件-表格网格列
      dynamicTableCols:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols.length >
          0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols
          : [
            {
              prop: 'vin',
              label: 'VIN码',
              width: 180
            },
            {
              prop: 'carSeriesCn',
              label: '车系'
            },
            {
              prop: 'carConfigCn',
              label: '基础车型'
            },
            {
              prop: 'optionalPagName',
              label: '选装包'
            },
            {
              prop: 'carColorName',
              label: '车身颜色'
            },
            {
              prop: 'carIncolorName',
              label: '内饰颜色'
            },
            {
              prop: 'oldHouseName',
              label: '源仓库名称'
            },
            {
              prop: 'oldHouseAddr',
              label: '源仓库地址'
            }
          ],
      // 字段格式化转换（用于导出excel）（kvs表示键值转换）
      dynamicExportConverts: {
        isEnable: {
          convert: 'kvs',
          kvs: {
            '1': '是',
            '0': '否'
          }
        }
      },
      // 单表格模版页面组件回调事件
      callbackObj: {
        onRowDbClick: (row) => {
          this.$emit('save', row)
          this.VINClose()
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      Object.assign(this.formField, this.dataForForm)
      setTimeout(() => {
        this.queryTable()
      }, 100)
    })
  },
  methods: {
    VINClose() {
      this.$emit('VINClose')
    }
    // 确认
  }
}
</script>
<style lang="scss" scoped>
  /deep/.el-dialog__wrapper {
    height: 100% !important;
  }

  /deep/.el-dialog__body {
    height: 500px;
  }
</style>
